@h: 40px;

.j-input {
    display: flex;
    // overflow: hidden;
    justify-content: flex-start;
    align-items: stretch;
    font-family: var(--font-family);
    position: relative;

    &.has {
        .j-input-txt {
            border-radius: 4px 0 0 4px;
        }
    }

    .j-input-txt {
        display: block;
        width: 100%;
        height: @h;
        font-size: 14px;
        background: #15181d;
        border-radius: 4px;
        border: 1px solid var(--border);
        outline: none;
        padding-inline-start: 10px;
        padding-inline-end: 40px;
        padding-top: 2px;
        color: #fff;
        flex: 1;
        transition: all 200ms;

        &[disabled] {
            // color: #3F454F;
            pointer-events: none;
        }

        &:focus {
            border: 1px solid var(--main);
        }

        &::placeholder {
            // color: #595964 !important;
            color: rgba(255, 255, 255,0.5) !important;
        }
    }

    .j-input-btn {
        height: @h;
        background: var(--main);
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #333333;
        border-radius: 0 4px 4px 0;
        user-select: none;
        // font-family: var(--font-family);
        font-size: 14px;
        transition: all 200ms;

        &:hover {
            background: var(--main-act);
        }
    }

    .j-input-close {
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 20px;
        height: 20px;
        background: url("@/assets/i-close.png") no-repeat center;
        background-size: auto 60%;
        z-index: 1;
        opacity: 0.8;

        &:hover {
            opacity: 1;
        }
    }

    .j-input-err {
        position: absolute;
        bottom: -24px;
        left: 0;
        color: #dd4444;
        font-size: 12px;
    }
}